@import "root.scss";

.color-background-4 { background-color:$a-primary-4 }
.color-background-3 { background-color:$a-primary-3 }
.color-background-2 { background-color:$a-primary-2 }
.color-background-1 { background-color:$a-primary-1 }


/* 按钮颜色  */

.color-button-success {
	background-color:$a-primary-1
}

.color-button-base {
	background-color:$a-primary-4
}


/* 文字颜色  $a$ 文章文字 副标题 */
.color-text-7 {color:$a-color-text-7 }
.color-text-6 {color:$a-color-text-6 }
.color-text-5 {color:$a-color-text-5 }
.color-text-4 {color:$a-color-text-4 }
.color-text-3 {color:$a-color-text-3 }
.color-text-2 {color:$a-color-text-2 }
.color-text-1 {color:$a-color-text-1 }
.color-text-0 {color:$a-color-text-0 }
/* 边框颜色 */

.color-border-4 { border: solid 1px $a-color-border-4}
.color-border-3 { border: solid 1px $a-color-border-3}
.color-border-2 { border: solid 1px $a-color-border-2}
.color-border-1 { border: solid 1px $a-color-border-1}

/* 基础颜色 */

.color-base-black { background-color:$a-color-base-black }
.color-base-white { background-color:$a-color-base-white }
.color-base-gray { background-color:$a-color-base-gray }


/* background-color */

.color-bg-white {
  background-color: $a-color-base-white;
}
.color-bg-gray {
  background-color: $a-color-base-gray;
}

// -----------------------flex---------------

.flex {
	display: flex;
}

.flex-row {
	flex-direction: row;
}

.flex-warp {
	flex-wrap: wrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}
 .justify-between {
	 justify-content: space-between;
 }
 
 .justify-center {
	 justify-content: center;
 }

.align-center {
	align-items: center;
}

.items-start {
  align-items: flex-start;
}

.align-stretch {
  align-items: stretch;
}

// ----------------font-size---------------
.font-size-20 {
	font-size: $a-font-size-20;
}

.font-size-24 {
	font-size: $a-font-size-24;
}

.font-size-28 {
	font-size: $a-font-size-28;
}


.font-size-32 {
	font-size: $a-font-size-32;
}



.font-size-36 {
	font-size: $a-font-size-36;
}




.line-height-40 {
	line-height: 40rpx;
}	
// 

.line-height-48 {
	line-height: 48rpx;
}	


// ----------------font-weight---------------
.font-weight-600 {
	font-weight: 600;
}



// ----------------box-sizing---------------
.border-box {
	box-sizing: border-box;
}

//  ---------------margin---------------
.mt-16 {
	margin-top: 16rpx;
}

.mt-20 {
	margin-top: 20rpx;
}


.mt-24 {
	margin-top: 24rpx;
}


.mt-88 {
	margin-top: 88rpx;
}

.mb-20 {
	margin-bottom: 20rpx;
}

.mb-40 {
	margin-bottom: 40rpx;
}


.ml-10 {
	margin-left: 10rpx;
}
.ml-16 {
	margin-left: 16rpx;
}
.mr-12 {
	margin-right: 12rpx;
}
.mr-16 {
	margin-right: 16rpx;
}
.mr-20 {
	margin-right: 20rpx;
}
.mr-40 {
	margin-right: 40rpx;
}

// ----------------padding---------------

.p-20 {
	padding: 20rpx;
}
.p-32 {
	padding: 32rpx;
}

.pl-14 {
	padding-left: 14rpx;
}
.pl-16 {
	padding-left: 16rpx;
}
.pl-20 {
	padding-left: 20rpx;
}
.pl-22 {
	padding-left: 22rpx;
}
.pl-26 {
	padding-left: 26rpx;
}
.pl-32 {
	padding-left: 32rpx;
}

.pr-14 {
	padding-right: 14rpx;
}
.pr-16 {
	padding-right: 16rpx;
}
.pr-20 {
	padding-right: 20rpx;
}
.pr-22 {
	padding-right: 22rpx;
}
.pr-26 {
	padding-right: 26rpx;
}
.pr-32 {
	padding-right: 32rpx;
}

.pt-4 {
	padding-top: 4rpx;
}


.pt-10 {
	padding-top: 10rpx;
}

.pt-16 {
	padding-top: 16rpx;
}

.pt-20 {
	padding-top: 20rpx;
}

.pt-22 {
	padding-top: 22rpx;
}
.pt-24 {
	padding-top: 24rpx;
}
.pt-44 {
	padding-top: 44rpx;
}

.pb-10 {
	padding-bottom: 10rpx;
}

.pb-16 {
	padding-bottom: 16rpx;
}
.pb-22 {
	padding-bottom: 22rpx;
}
.pb-24 {
	padding-bottom: 24rpx;
}

.pb-44 {
	padding-bottom: 44rpx;
}

// ----------------icon---------------

.icon-32 {
	width: 32rpx;
	height: 32rpx;
	image {
		width: 32rpx;
		height: 32rpx;
	}
}



.icon-48 {
	width: 48rpx;
	height: 48rpx;
	image {
		width: 48rpx;
		height: 48rpx;
	}
}

.icon-68 {
	width: 68rpx;
	height: 68rpx;
	image {
		width: 68rpx;
		height: 68rpx;
	}
}



// ----------------border-radius---------------

.border-radius-8 {
	border-radius: 8rpx;
}

.border-radius-16 {
	border-radius: 16rpx;
}


.border-radius-26 {
	border-radius: 26rpx;
}



// ----------------position ----------------

.relative {
	position: relative;
}




// text

.text-center-row {
	text-align: center;
}




// 行数

.line-clamp-1 {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}



// word-break
.word-break-all {
  word-break: break-all;
}
